<style>
    .play-container{
        width: 100%;
        height: 100%;
        position: relative ;
    }
    .video-player{
        width: 100%;
        height: 100%;
    }
    .play-content{
        height: 40px;
        width: 100%;
        background: transparent;
        position: absolute ;
        bottom: 0 ;
    }
    .progress-control{
        height: 5px;
        width: 70%;
        background: rgba(255,255,255,0.5) ;
        position: absolute;
        top:0 ;
        left: 0;
        right: 0;
        margin: auto ;
        border-radius: 15px; 
        cursor: pointer;
    }
    .current-progress{
        height: 100%;
        background: rgba(106, 122, 27, 0.8) ;
        float: left;
    }
    .progress-bar{
        width: 10px;
        height: 10px;
        border-radius: 10px;
        border: 1px solid #ffffff ;
        background: rgba(66, 64, 64, 0.8) ;
        float: left;
        margin-top: -3.5px;
        margin-left: -0.5px;
    }
    .timer{
        font-size: 14px;
        color: #ffffff ;
    }
    .time-split{
        padding: 0 5px;
    }
    .audio-container{
        width: 100%;
        height: 100%;
        position: absolute ;
        top: 0 ;
        left: 0;
        right: 0;
        bottom: 0;
        /* background: red; */
    }
</style>

<template>
    <div class="play-container" @mousemove="mousemove"  @mouseup="mouseup" @mouseout="mouseout">
        <video :src="src" :autoplay="autoPlay" class="video-player" ref="video" @emptied="emptied" @error="error" @durationchange="durationchange" @waiting="waiting" @loadeddata="onloadeddata" @timeupdate="ontimeupdate" @seeked="seeked"></video>
        <div v-if="mediaType == 'mp3'" class="audio-container">
            <slot></slot>
        </div>
        <div class="play-content">
            <div class="timer clearfix">
                <div class="current-time pull-left">{{currentTime}}</div>
                <div class="time-split pull-left">/</div>
                <div class="duration-time pull-left">{{duration}}</div>
            </div>
            <div class="progress-control clearfix" ref="progress" @click="getCurrentStep" >
                <div class="current-progress" :style="'width:'+ progressStep"></div>
                <div class="progress-bar"  @mousedown="mousedown" ></div>
            </div>
            <div class="button-control">
                <div v-if="isPlay" @click="pause">play</div>
                <div v-if="!isPlay" @click="play">pause</div>
                <div v-if="mediaType == 'mp4'">
                    <div class="full-screen" @click="fullScreen">全屏</div>
                    <div class="exit-full-screen" @click="exitFullScreen">退出全屏</div>
                </div>
            </div>
            <div class="message-control">
                视频异常处理
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data (){
        return {
            videoObj:'' ,
            duration: '00:00', //总时长
            currentTime:'00:00', //当前时间
            progressStep:'0' , //进度条位置
            isPlay : this.autoPlay , //是否播放
            isMove : false 
        }
    },
    props:{
        src : {
            type : String ,
            value : ''
        },
        autoPlay: {
            type : Boolean ,
            value : false
        },
        mediaType: {
            type: String ,
            value: 'mp4'  //支持音频视频播放  (mp3为音频 mp4为视频)
        }
    },
    mounted(){
        this.videoObj = this.$refs.video || '' ;
        
    },
    beforeDestroy(){
    },
    methods:{
        onloadeddata(){
            // this.duration = this.getTime(this.videoObj.duration) ;
        },
        ontimeupdate(){
            this.currentTime = this.getTime(this.videoObj.currentTime) ;
            this.getProgressStep() ;
        },
        durationchange(){
            this.duration = this.getTime(this.videoObj.duration) ;
        },
        seeked(){
            // console.log('正在下载资源')
        },
        //当资源发生故障时触发
        emptied(){
            console.log('视频异常')
        },
        error(){

        },
        waiting(){
            // console.log('正在缓冲？')
            // console.log(this.videoObj.buffered )
            
        },
        touchmove(event){
            // this.getCurrentStep(event)
        },
        mousedown(event){
             event.preventDefault() 
            this.isMove = true ;
        },
        mousemove(event){
            if(this.isMove){
                let { clientWidth } = this.$refs.progress ,
                { clientX } = event ,
                offsetleft = (window.innerWidth - clientWidth) / 2 ,
                currentStep = (event.clientX - offsetleft) / clientWidth; //设置block的X坐标   
            this.currentTime  = this.getTime(currentStep * this.videoObj.duration) ;
            this.videoObj.currentTime = currentStep * this.videoObj.duration ;
            }
        },
        mouseup(event){
            this.isMove = false ;
        },
        mouseout(){
            console.log(1)
        },
        //获取用户点击进度条位置时所在时间
        getCurrentStep(event){
            let { clientWidth } = this.$refs.progress ,
                { pageX } = event ,
                offsetleft = (window.innerWidth - clientWidth) / 2 ,
                currentStep = (pageX -offsetleft) /  clientWidth;
                
            this.currentTime  = this.getTime(currentStep * this.videoObj.duration) ;
            this.videoObj.currentTime = currentStep * this.videoObj.duration ;
        },
        //计算进度条位置
        getProgressStep(){
            let progress = (this.videoObj.currentTime/this.videoObj.duration) * 100 > 98.61311111 ? 
                            98.61311111 :
                            (this.videoObj.currentTime/this.videoObj.duration) * 100 ;
            this.progressStep = progress + '%'
        },
        //播放
        play(){
            this.videoObj.play()
            this.isPlay = true ;
        },
        //暂停
        pause(){
            this.videoObj.pause() ;
            this.isPlay = false ;
        },
        fullScreen(){
            var de = document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
        },
        exitFullScreen(){
            var de = document;
            if (de.exitFullscreen) {
                de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
                de.webkitCancelFullScreen();
            }
        },
        //格式化时间
        getTime:function(timer){
            let minute = Math.floor(timer/60) < 10 ? '0'+Math.floor(timer/60) : Math.floor(timer/60) ;
            let second = Math.floor(timer%60) < 10 ? '0' + Math.floor(timer%60) : Math.floor(timer%60);
            let timeText = (minute || '00')+':'+ (second || '00') ;
            return timeText ;
        },
        getSecond:function(timer){
            let sp = timer.split(':') ;
            return parseFloat(sp[0]*60) + parseFloat(sp[1]) ;
        },
    }
}
</script>
